import React from "react"
import { Image, Navigator, Text, View } from "@tarojs/components"
import clsx from "clsx"
import { pageMapper } from "@/constants/pageMap"
import { makePagePath } from "@/utils/router"

type IProps = {
  className?: string
  mustReadItem: any
}
const GpMustReadItem: React.FC<IProps> = (props: IProps) => {
  const { className, mustReadItem } = props
  const url = makePagePath(pageMapper.newsDetail, { id: mustReadItem.id })
  return (
    <Navigator url={url} className="block" hoverClass="none">
      <View className={clsx("block h-164px box-border flex flex-row", className)}>
        <View className="h-full flex flex-col justify-between flex-1 mr-32px">
          <Text className="yahei font-normal text-30px text-hex-333 leading-44px ellipse_3">
            {mustReadItem.title}
          </Text>
          <View className="flex flex-row justify-between items-center">
            {mustReadItem.tag ? (
              <Text className=" yahei font-normal text-24px text-hex-b8b8bf px-8px rounded-4px h-40px leading-40px bg-hex-f6f7f9">
                {mustReadItem.tag}
              </Text>
            ) : null}
            <Text className=" yahei font-normal text-26px text-hex-b8b8bf">
              {mustReadItem.views}人看过
            </Text>
          </View>
        </View>
        <View className="w-246px h-full overflow-hidden rounded-10px flex-none">
          <Image src={mustReadItem.picture} className="w-246px h-164px" mode="aspectFill" />
        </View>
      </View>
    </Navigator>
  )
}
export default GpMustReadItem
